Adwaita: notebook better header spacing
authorLapo Calamandrei <calamandrei@gmail.com>
Tue, 15 Mar 2016 18:02:11 +0000 (19:02 +0100)
committerLapo Calamandrei <calamandrei@gmail.com>
Tue, 15 Mar 2016 18:04:21 +0000 (19:04 +0100)
added some padding to the header and margins to the tabs node when
it's not the only child.

gtk/theme/Adwaita/_common.scss
gtk/theme/Adwaita/gtk-contained-dark.css
gtk/theme/Adwaita/gtk-contained.css

index 820e35d3e2c2a9a9c378ff9c5dba941a13735e83..a69ef1dda98b94692d6f4de6091f6cf0d34ab178 100644 (file)
@@ -1926,6 +1926,7 @@ popover.background {
  *************/
 notebook {
   > header {
+    padding: 1px;
     border-color: $borders_color;
     border-width: 1px;
     background-color: $dark_fill;
@@ -1935,10 +1936,12 @@ notebook {
       background-color: $backdrop_dark_fill;
     }
 
+    tabs { margin: -1px; }
+
     &.top {
       border-bottom-style: solid;
       > tabs {
-        margin-bottom: -1px;
+        margin-bottom: -2px;
         > tab {
           &:hover { box-shadow: inset 0 -3px $borders_color; }
 
@@ -1952,7 +1955,7 @@ notebook {
     &.bottom {
       border-top-style: solid;
       > tabs {
-        margin-top: -1px;
+        margin-top: -2px;
         > tab {
           &:hover { box-shadow: inset 0 3px $borders_color; }
 
@@ -1966,7 +1969,7 @@ notebook {
     &.left {
       border-right-style: solid;
       > tabs {
-        margin-right: -1px;
+        margin-right: -2px;
         > tab {
           &:hover { box-shadow: inset -3px 0 $borders_color; }
 
@@ -1980,7 +1983,7 @@ notebook {
     &.right {
       border-left-style: solid;
       > tabs {
-        margin-left: -1px;
+        margin-left: -2px;
         > tab {
           &:hover { box-shadow: inset 3px 0 $borders_color; }
 
@@ -2134,10 +2137,18 @@ notebook {
 
     &.top,
     &.bottom {
-      padding-left: 4px;
-      padding-right: 4px;
-
       tabs {
+        padding-left: 4px;
+        padding-right: 4px;
+
+        &:not(:only-child) {
+          margin-left: 3px;
+          margin-right: 3px;
+
+          &:first-child { margin-left: -1px; }
+          &:last-child { margin-right: -1px; }
+        }
+
         tab {
           margin-left: 4px;
           margin-right: 4px;
@@ -2149,10 +2160,18 @@ notebook {
 
     &.left,
     &.right {
-      padding-top: 4px;
-      padding-bottom: 4px;
-
       tabs {
+        padding-top: 4px;
+        padding-bottom: 4px;
+
+        &:not(:only-child) {
+          margin-top: 3px;
+          margin-bottom: 3px;
+
+          &:first-child { margin-top: -1px; }
+          &:last-child { margin-bottom: -1px; }
+        }
+
         tab {
           margin-top: 4px;
           margin-bottom: 4px;
index e96074a04b7ffc308da1f1c04d2fd555ec4cf47a..a2d3ef180dac66d2ffd0f369aaf7ab28d23562db 100644 (file)
@@ -1978,16 +1978,19 @@ popover.background {
  * Notebooks *
  *************/
 notebook > header {
+  padding: 1px;
   border-color: #1c1f1f;
   border-width: 1px;
   background-color: #2f3434; }
   notebook > header:backdrop {
     border-color: #1f2222;
     background-color: #303535; }
+  notebook > header tabs {
+    margin: -1px; }
   notebook > header.top {
     border-bottom-style: solid; }
     notebook > header.top > tabs {
-      margin-bottom: -1px; }
+      margin-bottom: -2px; }
       notebook > header.top > tabs > tab:hover {
         box-shadow: inset 0 -3px #1c1f1f; }
       notebook > header.top > tabs > tab:backdrop {
@@ -1997,7 +2000,7 @@ notebook > header {
   notebook > header.bottom {
     border-top-style: solid; }
     notebook > header.bottom > tabs {
-      margin-top: -1px; }
+      margin-top: -2px; }
       notebook > header.bottom > tabs > tab:hover {
         box-shadow: inset 0 3px #1c1f1f; }
       notebook > header.bottom > tabs > tab:backdrop {
@@ -2007,7 +2010,7 @@ notebook > header {
   notebook > header.left {
     border-right-style: solid; }
     notebook > header.left > tabs {
-      margin-right: -1px; }
+      margin-right: -2px; }
       notebook > header.left > tabs > tab:hover {
         box-shadow: inset -3px 0 #1c1f1f; }
       notebook > header.left > tabs > tab:backdrop {
@@ -2017,7 +2020,7 @@ notebook > header {
   notebook > header.right {
     border-left-style: solid; }
     notebook > header.right > tabs {
-      margin-left: -1px; }
+      margin-left: -2px; }
       notebook > header.right > tabs > tab:hover {
         box-shadow: inset 3px 0 #1c1f1f; }
       notebook > header.right > tabs > tab:backdrop {
@@ -2114,17 +2117,31 @@ notebook > header {
       notebook > header tab button.flat:first-child {
         margin-left: -4px;
         margin-right: 4px; }
-  notebook > header.top, notebook > header.bottom {
+  notebook > header.top tabs, notebook > header.bottom tabs {
     padding-left: 4px;
     padding-right: 4px; }
+    notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) {
+      margin-left: 3px;
+      margin-right: 3px; }
+      notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child {
+        margin-left: -1px; }
+      notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child {
+        margin-right: -1px; }
     notebook > header.top tabs tab, notebook > header.bottom tabs tab {
       margin-left: 4px;
       margin-right: 4px; }
       notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
         border-style: none solid; }
-  notebook > header.left, notebook > header.right {
+  notebook > header.left tabs, notebook > header.right tabs {
     padding-top: 4px;
     padding-bottom: 4px; }
+    notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) {
+      margin-top: 3px;
+      margin-bottom: 3px; }
+      notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child {
+        margin-top: -1px; }
+      notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child {
+        margin-bottom: -1px; }
     notebook > header.left tabs tab, notebook > header.right tabs tab {
       margin-top: 4px;
       margin-bottom: 4px; }
index 8c0b675be8c98035a669ec39acb2678d92994b23..b1e07aded258a3fb0ef1ac1ba9b9fcb01759f97e 100644 (file)
@@ -1990,16 +1990,19 @@ popover.background {
  * Notebooks *
  *************/
 notebook > header {
+  padding: 1px;
   border-color: #9d9d99;
   border-width: 1px;
   background-color: #cececc; }
   notebook > header:backdrop {
     border-color: #a5a5a1;
     background-color: #d1d1cf; }
+  notebook > header tabs {
+    margin: -1px; }
   notebook > header.top {
     border-bottom-style: solid; }
     notebook > header.top > tabs {
-      margin-bottom: -1px; }
+      margin-bottom: -2px; }
       notebook > header.top > tabs > tab:hover {
         box-shadow: inset 0 -3px #9d9d99; }
       notebook > header.top > tabs > tab:backdrop {
@@ -2009,7 +2012,7 @@ notebook > header {
   notebook > header.bottom {
     border-top-style: solid; }
     notebook > header.bottom > tabs {
-      margin-top: -1px; }
+      margin-top: -2px; }
       notebook > header.bottom > tabs > tab:hover {
         box-shadow: inset 0 3px #9d9d99; }
       notebook > header.bottom > tabs > tab:backdrop {
@@ -2019,7 +2022,7 @@ notebook > header {
   notebook > header.left {
     border-right-style: solid; }
     notebook > header.left > tabs {
-      margin-right: -1px; }
+      margin-right: -2px; }
       notebook > header.left > tabs > tab:hover {
         box-shadow: inset -3px 0 #9d9d99; }
       notebook > header.left > tabs > tab:backdrop {
@@ -2029,7 +2032,7 @@ notebook > header {
   notebook > header.right {
     border-left-style: solid; }
     notebook > header.right > tabs {
-      margin-left: -1px; }
+      margin-left: -2px; }
       notebook > header.right > tabs > tab:hover {
         box-shadow: inset 3px 0 #9d9d99; }
       notebook > header.right > tabs > tab:backdrop {
@@ -2126,17 +2129,31 @@ notebook > header {
       notebook > header tab button.flat:first-child {
         margin-left: -4px;
         margin-right: 4px; }
-  notebook > header.top, notebook > header.bottom {
+  notebook > header.top tabs, notebook > header.bottom tabs {
     padding-left: 4px;
     padding-right: 4px; }
+    notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) {
+      margin-left: 3px;
+      margin-right: 3px; }
+      notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom tabs:not(:only-child):first-child {
+        margin-left: -1px; }
+      notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom tabs:not(:only-child):last-child {
+        margin-right: -1px; }
     notebook > header.top tabs tab, notebook > header.bottom tabs tab {
       margin-left: 4px;
       margin-right: 4px; }
       notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
         border-style: none solid; }
-  notebook > header.left, notebook > header.right {
+  notebook > header.left tabs, notebook > header.right tabs {
     padding-top: 4px;
     padding-bottom: 4px; }
+    notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) {
+      margin-top: 3px;
+      margin-bottom: 3px; }
+      notebook > header.left tabs:not(:only-child):first-child, notebook > header.right tabs:not(:only-child):first-child {
+        margin-top: -1px; }
+      notebook > header.left tabs:not(:only-child):last-child, notebook > header.right tabs:not(:only-child):last-child {
+        margin-bottom: -1px; }
     notebook > header.left tabs tab, notebook > header.right tabs tab {
       margin-top: 4px;
       margin-bottom: 4px; }